<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../../templates/principal.xhtml">

    <ui:define name="head">

        <script type="text/javascript">
            function handleComplete(xhr, status, args) {
                if (args.validationFailed || !args.loggedIn) {
                    PF('usuarioDialog').show();
                } else {
                    PF('usuarioDialog').hide();
                }
            }
        </script>
    </ui:define>

    <ui:define name="content" id="content">
        <p:panel id="panel" header="Bem Vindo ao Cadastro de Usuário" style="">
            <p:dataTable id="tabUsuario" widgetVar="wtabUsuario" var="usuario" value="#{usuarioView.userLazy}" 
                         lazy="true" paginator="true" rows="10" paginatorPosition="top"
                         emptyMessage="Nenhum Registro Retornado ..." filterEvent="enter">

                <p:column style="width:2%">
                    <p:rowToggler />
                </p:column>

                <p:column headerText="Nome" sortBy="#{usuario.nomUser}" filterBy="#{usuario.nomUser}" style="width: 100%;">
                    <h:outputText value="#{usuario.nomUser}" />
                </p:column>

                <p:rowExpansion>
                    <p:dataTable id="tabRole" widgetVar="wtabRole" var="grupo" value="#{usuario.roles}" 
                                 emptyMessage="Nenhum Registro Retornado ...">

                        <f:facet name="header">
                            <h:outputText value="Grupo do Usuario" />
                        </f:facet>

                        <p:column style="width: 100%;">
                            <h:outputText value="#{grupo.nomFantasia}" />
                        </p:column>
                    </p:dataTable>

                </p:rowExpansion>

                <p:column style="width: 100px;">
                    <h:panelGrid columns="2">
                        <p:commandButton id="selectButtonUsuario" update=":frmPrincipal:panel :frmPrincipal:panelUser :frmPrincipal:messages" rendered="#{menuView.verificaAcesso(0,'consultar')}" 
                                         icon="ui-icon-search" title="Visualizar // Alterar Usuario" oncomplete="PF('usuarioDialog').show();">
                            <f:setPropertyActionListener value="#{usuario}" target="#{usuarioView.selectedUser}" />
                            <f:setPropertyActionListener value="#{false}" target="#{menuView.salvar}" />
                        </p:commandButton>

                        <p:commandButton id="excluirButtonUsuario" update=":frmPrincipal:panel :frmPrincipal:messages" rendered="#{menuView.verificaAcesso(0,'excluir')}" 
                                         icon="ui-icon-trash" title="Excluir Usuario" oncomplete="PF('confirmation').show();">
                            <f:setPropertyActionListener value="#{usuario}" target="#{usuarioView.selectedUser}" />
                        </p:commandButton>
                    </h:panelGrid>
                </p:column>

                <f:facet name="footer">
                    <div style="text-align: left;">
                        <p:commandButton id="incluirButtonUsuario" actionListener="#{usuarioView.preparaInserir}" rendered="#{menuView.verificaAcesso(0,'incluir')}" 
                                         update=":frmPrincipal:panel :frmPrincipal:messages" value="Novo Usuario"
                                         icon="ui-icon-pencil" title="Cadastrar Novo Usuario" oncomplete="PF('usuarioDialog').show();">
                            <f:setPropertyActionListener value="#{true}" target="#{menuView.salvar}" />
                        </p:commandButton>
                    </div>
                </f:facet>
            </p:dataTable>

            <p:dialog id="Dialogusuario" header="Detalhes Usuario" widgetVar="usuarioDialog" resizable="false" showEffect="slide" hideEffect="slide">
                <p:focus context="displayGrupo" />
                <p:ajax event="close" update=":frmPrincipal:panel" listener="#{menuView.fechaDialog()}" />
                <p:outputPanel id="panelUser" autoUpdate="true">
                    <p:panelGrid id="displayGrupo" style="width: 100%;">
                        <p:row>
                            <p:column style="width: 150px;">
                                <h:outputText value="Nome do Usuário:" />
                            </p:column>

                            <p:column style="width: 800px;">
                                <p:inputText id="inDscMix" value="#{usuarioView.selectedUser.nomUser}" maxlength="200" style="width: 99%; font-weight:bold" />
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="width: 150px;">
                                <h:outputText value="Username:" />
                            </p:column>

                            <p:column style="width: 600px;">
                                <p:inputText id="inUserName" value="#{usuarioView.selectedUser.username}" maxlength="200" style="font-weight:bold" />
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="width: 150px;">
                                <h:outputText value="Paasword:" />
                            </p:column>

                            <p:column style="width: 600px;">
                                <p:password id="inlineFeedback" value="#{usuarioView.selectedUser.password}" feedback="true" inline="true" 
                                            promptLabel="Digite sua Senha Secreta" weakLabel="Senha Fraca ..."
                                            goodLabel="Senha Boa ..." strongLabel="Senha Excelente ..." />
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="width: 150px;">
                                <h:outputText value="Confirme Paasword:" />
                            </p:column>

                            <p:column style="width: 600px;">
                                <p:password id="inlineFeedback2" value="#{usuarioView.password2}" feedback="true" inline="true" 
                                            promptLabel="Confirme sua Senha Secreta" weakLabel="Senha Fraca"
                                            goodLabel="Senha Boa" strongLabel="Senha Excelente" />
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="width: 150px;">
                                <h:outputText value="E-Mail:" />
                            </p:column>

                            <p:column style="width: 800px;">
                                <p:inputText id="inEmail" value="#{usuarioView.selectedUser.eMail}" maxlength="200" style="width: 99%; font-weight:bold" />
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column colspan="2" style="width: 100%;">
                                <p:dataTable id="multiRoles" var="roles" value="#{usuarioView.rolesLazy}" paginator="true" rows="15"
                                             lazy="true" selection="#{usuarioView.selectedUserRoles}" rowKey="#{roles.role_id}">

                                    <f:facet name="header">
                                        <h:outputText value="Selecione os Grupos" />
                                    </f:facet>

                                    <p:column selectionMode="multiple" style="width:4%" />

                                    <p:column headerText="Descrição" style="width:70%">
                                        <h:outputText value="#{roles.nomFantasia}" />
                                    </p:column>
                                </p:dataTable>
                            </p:column>
                        </p:row>

                        <f:facet name="footer">
                            <p:row>
                                <p:column colspan="2" style="width: 100%;">
                                    <p:commandButton value="Salvar" rendered="#{menuView.verificaAcesso(0,'incluir')}"
                                                     icon="ui-icon-disk" actionListener="#{usuarioView.inserir}" oncomplete="handleComplete(xhr, status, args)" />
                                    <p:commandButton value="Salvar" rendered="#{menuView.verificaAcesso(0,'alterar')}"
                                                     icon="ui-icon-disk" actionListener="#{usuarioView.alterar}" oncomplete="handleComplete(xhr, status, args)" />
                                </p:column>
                            </p:row>
                        </f:facet>
                    </p:panelGrid>
                </p:outputPanel>
            </p:dialog>

            <p:dialog header="Confirma a Exclusão desse Usuario?" widgetVar="confirmation">
                <p:commandButton value="Sim" update=":frmPrincipal:panel :frmPrincipal:messages" oncomplete="PF('confirmation').hide();"
                                 styleClass="ui-confirmdialog-yes" icon="ui-icon-check" actionListener="#{usuarioView.excluir}" />
                <p:commandButton value="Não" onclick="PF('confirmation').hide();" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
            </p:dialog>
        </p:panel>

    </ui:define>
</ui:composition>